<template>
    <van-nav-bar
        title="确认订单"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

    <van-form @submit="submit">
    <!-- 收货地址 -->
    <van-contact-card v-if="address"  type="edit" :tel="address.tel" :name="address.name" @click="ToggleAddress"/>
    <van-contact-card v-else type="add" add-text="添加地址" @click="AddressAdd" />

    <!-- 列表 -->
    <div class="cart-confirm" v-for="item in products">
        <!-- 商品卡片 -->
        <van-card
            class="goods-card"
            :title="item.products.name"
            :price="item.price"
            :thumb="item.products.thumb_text"
            :num="item.pronum"
        >
        </van-card>
    </div>

    <!-- 退货备注 -->
    <van-cell-group inset>
        <van-field
            v-model="remark"
            rows="2"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="请输入退货备注"
            show-word-limit        
        />
        <van-field
            v-model="result"
            is-link
            readonly
            :name="picker"
            placeholder="点击选择物流公司"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
                :columns="columns"
                @confirm="onConfirm"
                @cancel="showPicker = false"
            />
        </van-popup>
        <van-field
            v-model="expresscode"
            name="expresscode"
            label="快递单号"
            placeholder="快递单号"
            :rules="[{ required: true, message: '请填写快递单号' }]"
        />
    </van-cell-group>

    <!-- 退货确认 -->
    <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
        提交
        </van-button>
    </div>
    </van-form>

</template>

<script setup>
    import {getCurrentInstance} from 'vue'  
    const {proxy}  = getCurrentInstance()

    // 获取收获地址信息
    let address = proxy.$cookies.get('address') ? proxy.$cookies.get('address') : ''
    address = ref(address)
    // 获取订单id
    var orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0
    orderid = ref(orderid)

    // 获取用户信息
    let business = reactive(proxy.$cookies.get('business'))

    let remark = ref('')

    let products = ref({})
    let result = ref('')
    let picker = ref(0)
    let showPicker = ref(false)
    let columns = [
      { text: '', value: '' },
    ];
    let expresscode = ref('')

    // 钩子函数
    onBeforeMount(() => {
        ProductData()
        AddressData()
        ExpressData()
    })

    // 选择物流公司
    const onConfirm = ({ selectedOptions }) => {
        result.value = selectedOptions[0]?.text;
        picker.value = selectedOptions[0]?.value;
        showPicker.value = false;
    };
    

    // 获取物流公司
    let ExpressData = async () => {
        var result = await proxy.$POST({
            url: '/order/expresslist'
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }else{
            // columns.value = result.data
            // console.log(result.data);    
            for(var i =0;i<result.data.length;i++){
                columns[i] = {text: result.data[i].name,value: result.data[i].id}
            }
            // console.log(columns);
            return false
        }
    }

    // console.log(columns);
    // 获取商品信息
    let ProductData = async () => {
        var data = {
            busid: business.id,
            orderid: orderid.value
        }

        var result = await proxy.$POST({
            url: '/order/info',
            params: data
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }else{
            // console.log(result.data);
            products.value = result.data.products
            // console.log(products.value);
            return false
        }
    }

    // 获取收货地址
    let AddressData = async () => {
        // 当收货地址为空时去请求
        if(address.value){
            return false
        }

        // 组装数据
        var data = {
            busid: business.id
        }

        var result = await proxy.$POST({
            url: '/cart/address',
            params: data
        })

        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }

        address.value = {
            tel: `${result.data.mobile}(${result.data.consignee})`,
            name:`${result.data.region_text} ${result.data.address}`,
            id: result.data.id
        }
    }

    // 添加收货地址
    let AddressAdd = () => {
        proxy.$router.push('/address/add')
        return false
    }

    // 切换收货地址
    let ToggleAddress = () => {
        proxy.$router.push({
            path:'/address/index',
            query:{action:'toggle'}
        })
    }

    // 提交订单 -> 结算界面
    let submit = async () => 
    {
        proxy.$confirm({
            title: '确认退货信息',
            message: '是否确认提交退货信息'
        }).then(async () => {
            // 组装数据
            var data = {
                orderid: orderid.value,
                busid: business.id,
                addrid: address.value.id,
                remark: remark.value,
                expressid: picker.value,
                expresscode: expresscode.value
            }
            // console.log(data);

            var result = await proxy.$POST({
                url: '/order/refundinfo',
                params: data
            })

            if(result.code == 0){
                proxy.$fail(result.msg)
                return false
            }else{
                proxy.$success(result.msg)
                proxy.$router.push(result.url)
                return false
            }

        }).catch(err => {})
    }

    const back = () => {
        proxy.$router.go(-1)
        return false
    }
</script>

<style>
    .cart-confirm {
      display: block;
      width: 100%;
      background: var(--van-card-background);
    }
</style>